<template>
    <el-card>
        <div id="artical">
            <!--  表格  -->
            <el-table :data="searchArticalList" style="width: 100%" class="table" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column label="策划ID" prop="id" align="center"> </el-table-column>
                <el-table-column label="触发事件" prop="cilik" align="center"> </el-table-column>
                <el-table-column label="奖励红包" prop="rewardHB" align="center"> </el-table-column>
                <el-table-column label="奖励方式" prop="rewardFS" align="center"> </el-table-column>
                <el-table-column label="已送份数" prop="number" align="center"> </el-table-column>
                <el-table-column label="状态" prop="inUse" align="center">
                    <template slot-scope="scope">
                        <p :class="{inuse:(scope.row.inUse)}">{{(scope.row.inUse)?'关闭':'开启'}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="releaseTime" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  分页  -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchList.page"
                    :page-sizes="[5,10,15,20,25]"
                    :page-size="searchList.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=count
                    align="center"
                    class="pagenation">
            </el-pagination>
        </div>
        <!--  编辑对话框  -->
        <el-dialog title="策略配置" :visible.sync="editFormVisible" width="40%" class="edit">
            <!--  内容主题  -->
            <el-row :gutter="20">
                <el-col :span="16" :offset="4">
                    <el-form :model="editForm" label-width="90px" label-position="right">
                        <!--  标题  -->
                        <el-form-item label="标题">
                            <el-input v-model="editForm.name" prop="name"></el-input>
                        </el-form-item>
                        <!--  文章分类  -->
                        <el-form-item label="文章分类" prop="desc">
                            <el-select v-model="editForm.desc">
                                <el-option
                                        v-for="item in editArticalTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 发布时间 -->
                        <el-form-item label="发布时间" prop="releaseTime">
                            <el-date-picker
                                    v-model="editForm.releaseTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    align="right">
                            </el-date-picker>
                        </el-form-item>
                        <!-- 排序 -->
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="editForm.sort"></el-input>
                        </el-form-item>
                        <!-- 状态 -->
                        <el-form-item label="状态" prop="isUse">
                            <el-select v-model="editForm.inUse">
                                <el-option
                                        v-for="item in editShelfStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 跳转连接 -->
                        <el-form-item label="跳转连接" prop="url">
                            <el-input
                                    v-model="editForm.url"
                                    placeholder="请输入跳转连接/artical/10格式"></el-input>
                        </el-form-item>
                        <!-- 一句话介绍 -->
                        <el-form-item label="一句话介绍" prop="introduce" >
                            <el-input
                                    v-model="editForm.introduce"
                                    placeholder="请输入文章来源"></el-input>
                        </el-form-item>
                        <!-- 文章正文 -->
                        <el-form-item label="详细描述" prop="words" class="context">
                            <quill-editor ref="text" v-model="editForm.context" class="myQuillEditor" placeholder="请输入正文" :options="editorOption" />
                        </el-form-item>
                        <!-- 图片 -->
                        <el-form-item label="图片" prop="img" class="image">
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="http://172.17.2.238:8080/oss/service/file/upload"
                                    :on-success="upLoadImg">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">
                                    将文件拖到此处，或<em>点击上传</em>
                                </div>
                                <div class="el-upload__tip" slot="tip">
                                    只能上传jpg/png文件，尺寸为750*360
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- 编辑模态框 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submmitEditForm">
                    确 定
                </el-button>
            </div>
        </el-dialog>
        <!-- 删除模态框 -->
        <el-dialog
                title="提示"
                :visible.sync="delDialogVisible"
                width="30%">
            <span>确认删除？</span>
            <span slot="footer" class="dialog-footer">
      <el-button @click="delDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="deleArtical">确 定</el-button>
      </span>
        </el-dialog>
    </el-card>
</template>

<script>

    import {getHandler,delHandler,editHandler} from "../../http/content";

    export default {
        name: "Artical",
        data(){
            return{
                //总数
                count: null,
                //置顶
                radio: null,
                //附文本
                editorOption: {},
                //发送给后端的请求参数列表
                searchList: {
                    artical: {
                        desc: '',
                        name: '',
                    },
                    page: 1,
                    size: 5,
                    inUse: 2
                },
                //删除模态框
                delDialogVisible: false,
                //获取列表
                searchArticalList: [],
                //主页文章分类
                articalTypes: [
                    {
                        value: "",
                        label: "全部分类",
                    },
                    {
                        value: "关于我们",
                        label: "固定红包",
                    },
                    {
                        value: "公告",
                        label: "随机红包",
                    },

                ],
                //编辑分类
                editArticalTypes: [
                    {
                        value: "关于我们",
                        label: "关于我们",
                    },
                    {
                        value: "公告",
                        label: "公告",
                    },
                    {
                        value: "帮助中心",
                        label: "帮助中心",
                    }
                ],
                //主页状态
                shelfStatus: [
                    {
                        value: 2,
                        label: "全部状态",
                    },
                    {
                        value: 1,
                        label: "开启",
                    },
                    {
                        value: 0,
                        label: "关闭",
                    },
                ],
                //编辑状态
                editShelfStatus: [
                    {
                        value: true,
                        label: "开启",
                    },
                    {
                        value: false,
                        label: "关闭",
                    },
                ],
                //编辑模态框状态
                editFormVisible: false,
                //编辑表单
                editForm: {
                    name: "",
                    desc: "",
                    releaseTime: "",
                    sort:'',
                    img:'',
                    inUse:'',
                    context: '',
                    url:'',
                    introduce:''
                },
                //删除ID
                nowId: null
            };
        },
        created() {
            this.searchList.page = 1;
            this.getArtical();
        },


        methods: {
            //编辑
            handleEdit(index,row){
                this.editFormVisible = true;
                this.editForm = row;
                console.log(this.editForm);
            },
            //显示编辑模态框
            showEditDialog(){
                this.editFormVisible = true;
            },
            //编辑上传图片
            upLoadImg(response){
                this.editForm.img = response.data.fileUrl;
            },
            //提交编辑表单
            submmitEditForm(){
                let path = '/YYhuodong5/edit';
                editHandler(path,this.editForm)
                    .then(res => {
                        if(res.data.code != 20000) {
                            this.nowId = null;
                            return this.$message.error(res.data.message);
                        }
                        this.editFormVisible = false;
                        this.$message.success('编辑成功');
                        this.nowId = null;

                    })
                    .catch(err => {
                        this.$message.error(err);
                    })
            },
            //编辑
            editDialogClosed(){
                this.$refs.editFormRef.resetFields();
            },
            //新增轮播
            addArtical(){
                this.$route.push("/content/yunying/addArtical");
            },
            //分页
            //每页的大小改变
            handleSizeChange(newSize) {
                this.searchList.size = newSize;
                console.log(newSize);
                console.log(this.size,111);
                this.getArtical();
            },
            //当前页改变
            handleCurrentChange(newSize){
                console.log(newSize);
                this.searchList.page = newSize;
                this.getArtical();
            },
            //条件搜索
            searchArtical(){
                this.searchList.page = 1;
                this.getArtical();
            },
            //搜索
            getArtical(){
                let path = '/article/selectLikeOthers';
                console.log(this.searchList,111);
                getHandler(path,this.searchList)
                    .then(res => {
                        console.log(res,'文章数据');
                        this.searchArticalList = res.data.data.result.agreement;
                        this.count = res.data.data.result.count;
                    })
                    .catch(err => {
                        console.log('请求失败', err);
                    })
            },
            //弹出删除模态框
            handleDelete(row){
                this.delDialogVisible = true;
                this.nowId = row.id;
            },
            //确认删除
            deleArtical(){
                let path = '/article/delete';
                delHandler(path,this.nowId)
                    .then(res => {
                        if(res.data.code != 20000) {
                            this.nowId = null;
                            return this.$message.error(res.data.message);
                        }
                        this.$message.success('删除成功');
                        this.nowId = null;
                        this.delDialogVisible = false;
                        let totalPage = Math.ceil((this.count - 1) / this.size);
                        this.page = this.page>totalPage ? totalPage:this.page;
                        this.page=this.page<1 ? 1:this.page;
                        this.getArtical();
                    })
                    .catch(err => {
                        this.$message.error(err);
                    })
            },
            //删除文章
            delArtical(){
                let path = '/article/delete';
                delHandler(path,this.nowId)
                    .then(res => {
                        if(res.data.code != 20000) {
                            this.nowId = null;
                            return this.$message.error(res.data.message);
                        }
                        this.$message.success('删除成功');
                        this.nowId = null;
                        this.delDialogVisible = false;
                        if(this.searchArticalList.length == 0){
                            this.searchList.page -=1;
                            this.getArtical();
                        }else{
                            this.getArtical();
                        }
                    })
                    .catch(err => {
                        this.$message.error(err);
                    })
            }
        }
    };
</script>

<style scoped lang="less">
    //上架状态颜色
    .inuse{
        color: green;
    }
    //表格
    .table {
        margin-top: 20px;
    }
    //正文
    .context{
        height: 300px;
        overflow: auto;
    }
    .image {
        margin-top:50px ;
    }
    // 分页
    .pagenation{
        margin-top: 20px;
    }
</style>